<template lang="html">
  <div class="container content content-wage" v-loading="loading">
    <div class="wage-menu">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: 'meetingList' }">会议列表</el-breadcrumb-item>
        <el-breadcrumb-item>{{subject ? subject: '会议文件管理'}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="wage-add">
      <el-button type="primary" @click.stop="addFiles">添加文件</el-button>
      <el-table :data="blocks" style="width: 100%" class="wage-table">
        <el-table-column prop="fileName" label="文件名称" width="460">
        </el-table-column>
        <el-table-column prop="sequence" label="排序" width="70">  
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button @click="editModules(scope.row)" type="success" size="small">编辑</el-button>
            <el-button @click="showFile(scope.row)" type="success" size="small">查看文件</el-button>
            <el-button
              @click="deleteFileFun(scope.row)"
              type="danger"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="wage-add-pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="page"
          :page-size="pageSize"
          @current-change="loadMeetingFile"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog :title="titleName" :visible.sync="dialogTableVisible">
        <file-add
        v-if="dialogTableVisible"
        :type="type"
        :meetingId="id"
        :modules="modules"
        @hascreated="hascreated"
        @cancelAdd="cancelAddFun"
      >
      </file-add>
    </el-dialog>

     <el-dialog :title="modules.fileName" :visible.sync="pdfVisible">
        <pdf-touch
        v-if="pdfVisible"
        :pdfUrl="modules.storageDTO.requestPath"
        @cancelAdd="cancelAddFun"
      >
      </pdf-touch>
    </el-dialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import axios from 'axios';
import storage from '@/assets/js/storage';
import {  createConfig } from '@/assets/js/tools';
import FileAdd from '@/components/meetings/FileAdd'
import PdfTouch from '@/components/meetings/PdfTouch'

export default {
  name: 'meeting-file',
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      serial: [],
      blocks: [],
      type: 'add',
      dialogTableVisible: false,
      orgSelectDialog: false,
      modules: {},
      trees: [],
      dialogVisible: false,
      dialogLading: false,
      user: "",
      users: [],
      selectUsers: [],
      subject:'',
      id:'',
      pdfVisible: false
    };
  },
  components: {
    FileAdd,PdfTouch
  },
  computed: {
    ...mapGetters({
      userInfo: 'getUserInfo',
    }),
    titleName() {
      return this.type === 'add' ? '新增版块' : '编辑版块';
    },
  },
  methods: {
    addFiles() {
      this.type = 'add';
      this.dialogTableVisible = true;
    },
    editModules(modules) {
      this.type = 'edit';
      this.modules = modules;
      this.dialogTableVisible = true;
    },
    showFile(modules){
      this.modules = modules;
      this.pdfVisible = true;
    },
    hascreated() {
      this.dialogTableVisible = false;
      this.loadMeetingFile();
    },
    cancelAddFun() {
      this.dialogTableVisible = false;
      this.pdfVisible = false;
    },

    handleClick(row) {
      this.$router.push({
        path: 'card',
        query: row,
      });
    },
    deleteFileFun(row) {
      this.$confirm('是否删除该文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.deleteFile(row);
        })
        .catch(() => {});
    },
    deleteFile(row) {
      this.loading = true;

      let path = '/station/api/meeting/file/deleteFile?id=' + row.id + '&ts=' + Date.now();
      let headers = { token: this.userInfo.token };
      axios
        .get(path, {
          params: {},
          headers: headers,
        })
        .then((data) => {
          if (data.data.status === 'SUCCESS') {
            this.$message.success('删除成功');
            this.loading = false;
            this.loadMeetingFile();
          } else {
            this.$message.error('删除失败');
          }
          this.loading = false;
        })
        .catch((err) => {
          this.$message.error('删除失败');
          this.loading = false;
          // eslint-disable-next-line no-console
          console.log(err);
        });
    },

    loadMeetingFile() {
      this.loading = true;
      let param = {
        page: this.page - 1,
        pageSize: this.pageSize,
        meetingId: this.id
      };
      let path = '/station/api/meeting/file/pageMeetingFile?vs=' + Date.now();
      let config = createConfig(this.userInfo.token);
      axios
        .post(path, param, config)
        .then((data) => {
          if (data.data.status === 'SUCCESS') {
            let content = data.data.content;
            if (content && content.content && Array.isArray(content.content)) {
              this.blocks = content.content;
              this.total = content.totalElements;
            }
          } else {
            this.$message.error(
              data.data.errorMsg ? data.data.errorMsg : '获取文件出错'
            );
          }
          this.loading = false;
        })
        .catch((err) => {
          // eslint-disable-next-line no-console
          console.log(err);
          this.$message.error('获取文件出错');
          this.loading = false;
        });
    },
    addAdminFun(modules){
       this.modules = modules
       this.dialogVisible = true;
    },

    closeDialog() {
      this.dialogVisible = false;
      this.users = []
      this.user = "";
    },
    addUser() {
      if (this.user) {
        this.saveUser();
      } else {
        this.$message("请先选择人员");
      }
    },
    
  },
  mounted() {
    this.id = this.$route.query.id;
    this.subject = this.$route.query.subject;
    storage.initUserInfo();
    this.loadMeetingFile();
  },
};
</script>

<style lang="scss" scoped>
.content-wage {
  padding: 90px 30px 30px 30px !important;
  .wage-menu {
    margin-bottom: 30px;
  }
  .wage-table {
    margin-top: 25px;
  }
  .wage-add-pagination {
    margin-top: 20px;
  }
}
.td-list-span {
    margin-right: 7px;
}
</style>
